{extend name="common:base" /}
{block name="body"}
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">类目管理</a>
        <a>
            <cite>产品分类</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
        onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <div class="layui-input-inline layui-show-xs-block">
                        <button class="layui-btn"
                            onclick="xadmin.open('添加','{:url(\'category_add_product\')}',800,600)"><i
                                class="layui-icon"></i>添加
                        </button>
                    </div>
                    <hr>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-table layui-form">
                        <thead>
                            <tr>
                                <th width="20">
                                    <input type="checkbox" name="" lay-skin="primary">
                                </th>
                                <th width="70">ID</th>
                                <th>栏目名</th>
                                <th width="50">排序</th>
                                <th width="50">状态</th>
                                <th width="310">操作</th>
                        </thead>
                        <tbody class="x-cate">
                            {notempty name="category"}
                            {volist name="category" id="vo"}
                            <tr cate-id='{$vo.id}' fid='{$vo.parent_id}'>
                                <td>
                                    <input type="checkbox" name="" lay-skin="primary">
                                </td>
                                <td>{$vo.id}</td>
                                <td>
                                    {$vo.delimiter|raw}
                                    {if($vo.is_parent == 1)}
                                    <i class="layui-icon x-show" status='true'>&#xe623;</i>
                                    {elseif($vo.is_parent == 2) /}
                                    <i class="layui-icon x-show" status='true'>&#xe623;</i>
                                    {else /}
                                    <i>├-</i>
                                    {/if}
                                    {$vo.name}
                                </td>
                                <td class="x-sort">
                                    <input type="text" class="layui-input" attr-id="{$vo.id}" name="listorder"
                                        value="{$vo.listorder}">
                                </td>
                                <td>
                                    {if($vo.status == 1)}
                                    <button class="layui-btn layui-btn-normal layui-btn-mini">启用</button>
                                    {else /}
                                    <button class="layui-btn layui-btn-danger layui-btn-mini">禁用</button>
                                    {/if}
                                </td>
                                <td class="td-manage">
                                    <button class="layui-btn layui-btn layui-btn-xs btn-edit-product"
                                        onclick="xadmin.open('编辑','{:url(\'category_edit_product\',[\'id\'=>$vo.id])}',800,600)">
                                        <i class="layui-icon">&#xe642;</i>编辑
                                    </button>
                                    {if($vo.is_parent !=3 )}
                                    <button class="layui-btn layui-btn-warm layui-btn-xs"
                                        onclick="xadmin.open('添加子分类','{:url(\'category_add_product\',[\'id\'=>$vo.id])}')">
                                        <i class="layui-icon">&#xe624;</i>子栏目
                                    </button>
                                    {/if}
                                    {if($vo.status == 2)}
                                    <button class="layui-btn layui-btn-normal layui-btn-mini"
                                        onclick="changeStatus('{:url(\'category_change_product\',[\'id\'=>$vo.id,\'status\'=>1])}')">启用</button>
                                    {else /}
                                    <button class="layui-btn layui-btn-danger layui-btn-mini"
                                        onclick="changeStatus('{:url(\'category_change_product\',[\'id\'=>$vo.id,\'status\'=>2])}')">禁用</button>
                                    {/if}
                                    <!--<button class="layui-btn-danger layui-btn layui-btn-xs"
                                        onclick="member_del(this,'要删除的id')" href="javascript:;"><i class="layui-icon">&#xe640;</i>删除
                                </button>-->
                                </td>
                            </tr>
                            {/volist}
                            {/notempty}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="javascript"}
<script src="{{admin}}/js/common.js"></script>
<script src="{{frontend}}/lib/layer/2.4/layer.js"></script>
<script>

    layui.use(['form'], function () {
        form = layui.form;
    });

    $(function () {
        $("tbody.x-cate tr[fid!='0']").hide();
        // 栏目多级显示效果
        $('.x-show').click(function () {
            if ($(this).attr('status') === 'true') {
                $(this).html('&#xe625;');
                $(this).attr('status', 'false');
                cateId = $(this).parents('tr').attr('cate-id');
                $("tbody tr[fid=" + cateId + "]").show();
            } else {
                cateIds = [];
                $(this).html('&#xe623;');
                $(this).attr('status', 'true');
                cateId = $(this).parents('tr').attr('cate-id');
                getCateId(cateId);
                for (var i in cateIds) {
                    $("tbody tr[cate-id=" + cateIds[i] + "]").hide().find('.x-show').html('&#xe623;').attr('status', 'true');
                }
            }
        });
    })

    var cateIds = [];

    function getCateId(cateId) {
        $("tbody tr[fid=" + cateId + "]").each(function (index, el) {
            id = $(el).attr('cate-id');
            cateIds.push(id);
            getCateId(id);
        });
    };
    $('.x-sort input').blur(function () {
        let $var = $(this)
        let id = $var.attr('attr-id');
        let listorder = $var.val();
        let postData = {
            'id': id,
            'listorder': listorder
        };
        let url = '{:url(\'category_order_product\')}';
        $.post(url, postData, function (result) {
            if (result.status === 1) {
                layer.msg(result.message, { 'icon': 1, 'time': 1000 }, function () {
                    window.location.reload();
                });
            } else {
                layer.msg(result.message, { 'icon': 5, 'time': 8000 });
            }
        }, 'json');
    });
    // $('.btn-edit-product').click(function () {
    //     layer.open({
    //         // type: 2,
    //         title: '编辑',
    //         // shadeClose: true,
    //         // content: "{:url(\'category_add_product\',[\'id\'=>$vo.id])}",
    //         content: "{:url(\'category_edit_product\',[\'id\'=>$vo.id])}",
    //         area: [800+'px', 600+'px'],
    //         success:function(layero, index){
    //             console.log(layero);
    //             console.log(index);
    //         }
    //     })
    // })
</script>
{/block}